import React from "react";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
export default class Three extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      test: "未定义的内容"
    };
  }

  onDragStart = () => {
    this.setState({
      test: "拉起---sss"
    });
  };

  onDragUpdate = () => {
    this.setState({
      test: "移动---ing"
    });
  };

  onDragEnd = () => {
    this.setState({
      test: "放下---eee"
    });
  };
  render() {
    return (
      <DragDropContext
        style={{ boxShadow: " 0 0 2px rgb(204, 201, 201)" }}
        onDragStart={this.onDragStart}
        onDragUpdate={this.onDragUpdate}
        onDragEnd={this.onDragEnd}
      >
        <Droppable droppableId="droppable-1" type="PERSON">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={{
                backgroundColor: snapshot.isDraggingOver ? "blue" : "grey"
              }}
              {...provided.droppableProps}
              
            >
              <h1>{this.state.test}</h1>
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}
